<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            padding-bottom: 800px;
            padding-left: 30px;
        }

        .user-list {
            width: 100%;
            margin: 20px auto;
            display: flex;
            flex-wrap: wrap;

        }

        .user-card {
            width: 300px;
            height: 130px;

            display: flex;
            box-shadow: 0px 0px 10px #888;
            margin-right: 50px;
            border-radius: 6px;

        }

        .user-card .head {
            width: 120px;
            border-radius: 6px;
            overflow: hidden;
        }

        .user-card .head img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        .user-card .info {
            width: 150px;
            margin-left: 10px;
            margin-top: 10px;

            /* 当前字体的倍数 */
            line-height: 1.7;

        }

        .user-card .info .row {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            cursor: pointer;
        }

        .user-card .info .row span:first-child {
            color: #999;
            display: inline-block;
            width: 50px;
            text-align-last: justify;
        }

        .user-card .info .row span:last-child::before {
            content: ":";
            padding: 0px 4px;
            font-weight: bold;
        }

        .user-card .info .row:hover {
            background: #000;
            color: white;
            border-radius: 6px;
            padding: 0px 10px;
            transform: translate(-10px, 0px);
            /* 按照内容填充 */
            width: fit-content;
            min-width: 100%;

        }
    </style>
</head>

<body>
    <div id="app">
        <h4>v-for循环数组对象</h4>
        <!-- 
            v-for 循环数组对象时，产生的对象临时变量在循环体内依然可以进行表达式取值
        -->
        <div class="user-list">
            <div class="user-card"
                v-for="(u,i) in users"
            >
                <div class="head">
                    <img :src="u.img" alt="">
                </div>
                <div class="info">
                    <div class="row">
                        <span>编号</span>
                        <!-- <span>{{users[i].No}}</span> -->
                        <span>{{u.No}}</span>
                    </div>
                    <div class="row">
                        <span>姓名</span>
                        <span>{{u.name}}</span>
                    </div>
                    <div class="row">
                        <span>性别</span>
                        <span>{{u.sex}}</span>
                    </div>
                    <div class="row">
                        <span>手机号</span>
                        <span>{{u.tel}}</span>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <h4>v-for中完成数据的修改操作</h4>
        <h5>v-for循环的数组，内部元素为基本数据类型时，对数据的操作必须使用下标方式构成引用关系</h5>
        <ul>
            <li v-for="(n,i) in names">
                <span style="padding-right: 12px;">{{ n }}</span>
                <input type="text" :value="n" @input=" n=$event.target.value ">
                <input type="text" :value="n" @input=" names[i]=$event.target.value ">
            </li>
        </ul>
        <ul>
            <li v-for="(n,i) in names">
                <label v-if="editIndex==i">
                    <input type="text" :value="n" @input=" names[i]=$event.target.value ">
                    <input type="button" value="完成" @click="editIndex=-1">
                </label>
                <label v-else>
                    <span style="padding-right: 12px;">{{ n }}</span>
                    <input type="button" value="编辑" @click="editIndex=i">
                </label>
            </li>
        </ul>
        <h5>v-for循环的数组，内部元素为引用数据类型时，对数据的操作可以直接操作临时变量</h5>
        <ul>
            <li v-for="u in users">
                <span style="padding-right: 12px;">{{ u.name }}</span>
                <input type="text" :value="u.name" @input=" u.name=$event.target.value ">
            </li>
        </ul>
        <!-- 
            vue页面对一个仓库对象进行操作，如果操作的属性在该对象中并不存在，vue会自动补充该属性，并提供响应式 
            vue页面模板语法加载变量时，如果变量应该属于仓库根变量，但未定义，此时程序运行会报错
            vue页面模板语法加载变量时，如果变量属于仓库中定义引用数据变量的内部属性,且未定义，此时程序正常运行，取值为undefined
                ==> 【 vue中 null 和 undefined 通过插值表达式输出的是 “” - 空字符串 】
        -->
        <ul>
            <li v-for="u in users">
                <label v-if="u.isEdit">
                    <input type="text" :value="u.name" @input=" u.name=$event.target.value ">
                    <input type="button" value="完成" @click="u.isEdit=false">
                </label>
                <label v-else>
                    <span style="padding-right: 12px;">{{ u.name }}</span>
                    <input type="button" value="编辑" @click="u.isEdit=true">
                </label>
            </li>
        </ul>
        <!-- {{ aaa }} -->
    </div>
    <script src="../assets/mock/mock-min.js"></script>
    <script type="module">
        // let arr = ["张三","李四","王二"];
        // // for (let item of arr) {
        // //     item = 111;
        // // }
        // for (let i in arr) {
        //     arr[i] = 111;
        // }
        // console.log(arr)

        // let arr2 = [{a:1},{a:2}];
        // for (let item of arr2) {
        //     item = 111;
        // }
        // console.log(arr)
        // 加载 Vue3 的ESM 模块文件
        import { createApp } from "../assets/vue3/vue.esm-browser.js"
        createApp({
            data() {
                return {
                    // aaa:1,
                    users: Mock.mock({
                        "users|2": [
                            {
                                No: "@id",
                                name: "@cname",
                                "sex|1": ["男", "女", "未知"],
                                tel: /^1\d{10}$/,
                                img: "https://api.ixiaowai.cn/mcapi/mcapi.php?_=@datetime('T')",
                                // isEdit:false
                            }
                        ]
                    }).users,
                    names:["张三","李四","王二"],
                    editIndex:-1
                }
            }
        }).mount("#app")
    </script>
</body>

</html>